<script setup>
import { SearchOutlined, PlusCircleOutlined,SyncOutlined} from '@ant-design/icons-vue';
import CreateGoods from "./components/CreateGoods.vue"
import Pagination from "@/components/Pagination/Pagination.vue";
import ScaleImage from "@/components/ScaleImage/ScaleImage.vue"
import { getProductTypeList,productTypeDelete} from "@/apis/product"
import { ref, reactive, provide } from "vue"
import { onMounted } from 'vue';

const columns = [
    {
        title: '编号',
        dataIndex: 'id',
        align: 'center',
        fixed: 'left',
    },
    {
        title: '商品名称',
        dataIndex: 'name',
        align: 'center',
    },
    {
        title: '商品图片',
        dataIndex: 'img',
        align: 'center',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: 'center',
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        align: 'center',
    },
    {
        title: '备注',
        dataIndex: 'description',
        align: 'center',
    },
    {
        title: '操作',
        dataIndex: 'operate',
        align: 'center',
        width: 120,
        fixed: 'right',
    },
];
const loading = ref(true);
const dataSource = ref(null);
const createRef = ref(null);
const checked = ref(true);
const total = ref(0)
provide("loading",loading)
provide("getList", () => getList())
const formState = reactive({
    page: 1,
    size: 10,
    name: "",
})
onMounted(() => {
    getList();
})
const getList = async () => {
    loading.value = true;
    let res = await getProductTypeList(formState)
    if (res.code === 200) {
        loading.value = false;
        dataSource.value = res.data.list
        total.value = res.data.total;
    }
}
const changepage = (options) => {
    loading.value = true;
    formState.page = options.page;
    formState.size = options.pageSize;
}
const handleCreateUser = () => {
    createRef.value.open = true;
    createRef.value.titleflag = true;
}
const handleReset=()=>{
    formState.name="";
    formState.page=1;
    formState.size=10;
    getList();
}
const handleEdit=(options)=>{
    createRef.value.open = true;
    createRef.value.titleflag = false;
    for (const key in createRef.value.formState){
        createRef.value.formState[key]=options[key];
    };
}
const handleDelete=(options=>{
    loading.value = true;
    productTypeDelete({id:options.id}).then(res=>{
        if (res.code === 200) {
            getList();
        }
    })
})
</script>
<template>
    <div class="user-container outerlayer-container">
        <div class="user-search top-search-container">
            <div class="type">
                淘宝商品:&nbsp;&nbsp;
                <a-input v-model:value="formState.name" placeholder="请输入淘宝商品名称" :allowClear="true" />
            </div>&nbsp;
            <div>
                <a-button type="primary" @click="getList">
                    <template #icon>
                        <SearchOutlined />
                    </template>
                    搜索
                </a-button>&nbsp;
            </div>
            <div>
                <a-button type="primary" @click="handleReset">
                    <template #icon>
                        <SyncOutlined />
                    </template>
                    重置
                </a-button>&nbsp;
            </div>
            <a-button type="primary" @click="handleCreateUser">
                <template #icon>
                    <PlusCircleOutlined />
                </template>
                新增
            </a-button>
        </div>
        <div ref="tableRef" class="main-content-container">
            <a-table :loading="loading" :columns="columns" :data-source="dataSource" rowKey="id" :pagination="false"
                :scroll="{ x: 'max-content' }">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'img'">
                        <div class="img-container">
                            <ScaleImage :imgurl="text" alt=""/>
                        </div>
                    </template>
                    <template v-if="column.dataIndex === 'updateTime'">
                        {{ text||"未修改" }}
                    </template>
                    <template v-if="column.dataIndex === 'operate'">
                        <div class="">
                            <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
                            <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
                        </div>
                    </template>
                </template>
            </a-table>
            <Pagination :total="total" :page="formState.page" :size="formState.size" @changepage="changepage" />
        </div>
        <CreateGoods ref="createRef" />
    </div>
</template>
<style lang='scss' scoped>
.img-container{
    width: 60px;
    height: 60px;
    margin:  0 auto;
}
.user-container {
    .user-search {
        display: flex;
        margin-bottom: 10px;
        &>div{
            display: flex;
            align-items: center;
            &.type {
                &>span{
                    width: 160px;
                }
            }
        }
    }
}
</style>